<template>
  <div class="nowOrder">
    <div class="center">
      <div class="first">
        <div class="wm">外卖</div>
        <div class="orderId">2502</div>
        <van-steps class="vsteps" :active="active">
          <van-step>买家下单</van-step>
          <van-step>商家接单</van-step>
          <van-step>买家提货</van-step>
          <van-step>交易完成</van-step>
        </van-steps>
        <div class="nowOrderTips">您的订单正在制作中，请耐心等待</div>
      </div>
      <div class="order_banner">
        <a href="#">
          <img src="/images/order_banner.jpg" alt="" />
        </a>
      </div>
      <div class="mt_drivers">
        <van-image
          round
          width="10vw"
          height="10vw"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div style="margin-left:-18vw">
          <span>王渊博</span>
          <span>骑手已接单，正在赶往商家<van-icon name="arrow" /></span>
        </div>
        <van-icon name="phone-o" size="30" color="#a7d500" />
      </div>
      <now-oder-product-card />
      <pay-card />
      <shop-card />
    </div>
  </div>
</template>

<script>
import NowOderProductCard from "./NowOderProductCard.vue";
import PayCard from "./PayCard.vue";
import ShopCard from "./ShopCard.vue";
export default {
  components: { PayCard, ShopCard, NowOderProductCard },
  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style scoped>
.nowOrder {
  margin-top: 16vw;
  margin-bottom: 16vw;
}
.center {
  width: 92%;
  margin: 1vw auto;
}
.first {
  width: 100%;
  background-color: white;
  border-radius: 2vw;
  /* background-color: gray; */
  padding: 5vw 0;
  position: relative;
  text-align: center;
}
.first .vsteps {
  width: 85%;
  margin: 0 auto;
}
.first .wm {
  position: absolute;
  left: 0;
  top: 0;
  width: 15vw;
  color: #a7d500;
  border: 1px solid #a7d500;
  border-radius: 3vw;
  font-size: 3vw;
  padding: 1vw 0;
}
.first .orderId {
  font-size: 8vw;
}
.first .nowOrderTips {
  font-size: 3vw;
  letter-spacing: 2px;
}
.center .order_banner img {
  margin: 2vw auto 0;
  width: 92%;
  border-radius: 2vw;
}
.center .order_banner > a {
  display: block;
}
.center .order_banner img {
  display: block;
  width: 100%;
}
.mt_drivers {
  background-color: white;
  display: flex;
  margin-top: 2vw;
  padding: 4vw;
  justify-content: space-between;
  align-items: center;
  border-radius: 2vw;
}
.mt_drivers span {
  display: block;
}
.mt_drivers span:nth-child(1) {
  font-size: 4vw;
  color: black;
}
.mt_drivers span:nth-child(2) {
  color: #bec2c5;
  font-size: 1vw;
}
.mt_drivers a {
  color: #bec2c5;
}
</style>